<!DOCTYPE html>
<%@page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/inc/includeExtJs.jsp" %>
<html>
	<head>
		<title>main</title>
		<script src="../js/jquery/js/jquery-1.3.2.min.js"></script>
		<style>
		   ul.x-tab-strip-top{
		     padding-top:1px;
		     background:url(images/i-rightbg2.gif) #cedff5 repeat-x top;
		   }
		   .x-tab-panel-footer{
		     background:#BDE1F1;
		     overflow:hidden;
		     zoom:1;
		     height:0px
		    }
		   .x-tab-strip-bottom .x-tab-strip-active .x-tab-right{
		     background:url(images/close1.gif) no-repeat bottom left;
		    }
		   .x-tab-strip-bottom .x-tab-strip-active .x-tab-left{
		     background:url(images/close2.gif) no-repeat bottom right;
		    }
			
		   .x-tab-strip span.x-tab-strip-text{
		     font:normal 11px tahoma,arial,helvetica;
		     color:#000000;
		     white-space:nowrap;
		     cursor:pointer;
		     padding:4px 0;
		    }
		   .x-tab-strip-over span.x-tab-strip-text{
		     color:#FFFFFF;
		    }
		   .x-tab-strip-active{
		     cursor:default;
		    }
		   .x-tab-strip-active span.x-tab-strip-text{
		     cursor:default;
		     color:#FFFFFF;
		     font-weight:bold;
		    }
           
           .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close{
             background-image:url(images/close2.gif);
             opacity:.6;
             -moz-opacity:.6;
             background-repeat:no-repeat;
             display:block;
             width:11px;
             height:11px;
             position:absolute;
             top:3px;
             right:3px;
             cursor:pointer;
             z-index:2;
            }
           .x-tab-strip-top .x-tab-strip-active a.x-tab-strip-close{background-image:url(images/close1.gif);}
           
           .x-tab-strip-top .x-tab-right{background:transparent url(images/tabs-sprite.gif) no-repeat 0 -51px;padding-left:10px;}
           .x-tab-strip-top .x-tab-strip-inner{background:transparent url(images/tabs-sprite.gif) repeat-x 0 -201px;}
           
           .x-tab-strip-top .x-tab-strip-over .x-tab-right{background-position:0 0;}
		   .x-tab-strip-top .x-tab-strip-over .x-tab-left{background-position:right -301px;}
		   .x-tab-strip-top .x-tab-strip-over .x-tab-strip-inner{background-position:0 -151px;}
		   .x-tab-strip-top .x-tab-strip-active .x-tab-right{background-position:0 -101px;}
		   .x-tab-strip-top .x-tab-strip-active .x-tab-left{background-position:right -401px;}
		   .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner{background-position:0 -251px;}

		   .nodeIcon  { padding-left: 3px ! important;padding-right: 3px ! important;   }
		  
		   .x-tab-strip-top .x-tab-left{background:transparent url(images/tabs-sprite.gif) no-repeat right -351px;padding-right:4px;}
		   .x-tab-strip-closable .x-tab-left{padding-right:19px;}
		</style>
	</head>
	<body scroll="no">
	</body>
	<script type="text/javascript">
	//定义一个插件用于右击关闭其它按钮 开始
	 //定义插件
	 Ext.ux.TabCloseMenu = function(){
      var tabs;//面板
      var menu;//右击显示的菜单
      var ctxItem;//右击菜单中的选项
      this.init = function(tp){
         tabs = tp;
         tabs.on('contextmenu', onContextMenu);//指定事件
      }
     
      function onContextMenu(ts, item, e){
        if(!menu){ //创建右击后显示的菜单
            menu = new Ext.menu.Menu([{
                id: tabs.id + '-close',
                text: '关闭面板',
                handler : function(){
                    tabs.remove(ctxItem);
                }
            },{
                id: tabs.id + '-close-others',
                text: '关闭其他面板',
                handler : function(){
                    tabs.items.each(function(item){
                        if(item.closable && item != ctxItem){
                            tabs.remove(item);
                        }
                    });
                }
            },{
                id: tabs.id + '-cancel',
                text: '取消弹出框'
            }
            ]);
        }
        ctxItem = item;
        var items = menu.items;
        items.get(tabs.id + '-close').setDisabled(!item.closable);
        var disableOthers = true;
        tabs.items.each(function(){
            if(this != item && this.closable){
                disableOthers = false;
                return false;
            }
        });
        items.get(tabs.id + '-close-others').setDisabled(disableOthers);
        menu.showAt(e.getPoint());
    }
};
	//定义一个插件用于右击关闭其它按钮 结束
	
	var tabpanel;
	 //DOM加载完后执行的脚本
	 Ext.onReady(function(){	
	     Ext.BLANK_IMAGE_URL='${app}/js/extJs/resources/images/default/s.gif';
	     
	     //定义TAB面板
	     tabpanel= new Ext.TabPanel({
        		id:'tabpanel',
        		region: 'center',
        		activeTab:0,
        		enableTabScroll:true,
        		tabWidth:65,
        		minTabWidth:35,
        		margin:0,
        		padding:0,
        		plugins: new Ext.ux.TabCloseMenu(),
     			defaults: {autoScroll:false}  
     	 	});
      
      	   //ViewPort用户填充窗体 	 
           MyViewportUi = Ext.extend(Ext.Viewport, {
             layout: 'border', //采用border布局
             initComponent: function() {
                this.items = [tabpanel];
                 MyViewportUi.superclass.initComponent.call(this);
              }
    
           });
		 
		  //新建VIEWPORT	
		  new MyViewportUi();
    	
    	  //默认打开信息中心
   		  addTab('0','/cnaps/messageCenter!messageCenter.do','信息中心',false,'nodeIcon');  
	 });
	
	 //添加面板
     
	 function addTab(id,url,name,isClosed,iconCls){
   	  		var tab=tabpanel.getComponent(id);
   	  		if(tab) {
   	  		  tab.show();
   	  		}else{
      		   if(isClosed==null) isClosed=true;
      		   if(iconCls==null) iconCls="nodeIcon";
      		   tab=tabpanel.add({
      			  id:id,
      	    	  title: name.trim(),
            	  iconCls: 'tabs',
            	  closable:isClosed,
       			  iconCls:iconCls,
            	  html:'<iframe id="main_'+id+'" src="" height='+(document.documentElement.clientHeight-28)+' width="100%" frameborder="0" scrolling="yes"></iframe>' 
        	   }).show();
        	   var bbbb = document.documentElement.clientHeight;
        	   var aa = setTimeout("$('#main_"+id+":last').attr('src','"+url+"');",200);
        	}
     }
	</script>
</html>